<template>
	<view class="searchTab">
		<view class="serachWrapper">
			<view class="iconfont icon-sousuo"></view>
			<input type="text" class="searchInput" placeholder="商品名/品牌/订货号/型号等" placeholder-style="color: #aaa">
			<view class="inputLine"></view>
			<view class="searchBtn">
				搜索
			</view>
		</view>
		
		<view class="iconfont icon-duihao"></view>
	</view>
</template>

<script>
	export default {
		name: 'SearchBar',
		data() {
			return {}
		}
	}
</script>

<style lang="less">
	// 搜索栏
	.searchTab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750upx;
		height: 90upx;
		padding: 20upx;
		margin-bottom: 20upx;
		box-sizing: border-box;
		.serachWrapper {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 630upx;
			height: 60upx;
			border: 2upx solid #eee;
			border-radius: 40upx;
			background-color: #eee;
			.icon-sousuo {
				color: #aaa;
				font-size: 48upx;
				margin: 0 20upx;
				line-height: 60upx;
				font-weight: bolder;
			}
			.searchInput {
				width: 420upx;
				font-size: 28upx;
			}
			.inputLine {
				width: 2upx;
				height: 24upx;
				background-color: #aaa;
			}
			.searchBtn {
				color: red;
				text-align: center;
				line-height: 60upx;
				flex: 1;
				font-size: 28upx;
				font-weight: bold;
			}
		}
		.icon-duihao {
			font-size: 48upx;
			font-weight: bolder;
			color: #fff;
		}
	}
	
</style>